<!--
 * @Description: el-table基础封装
 * @Author: zhanyinjia
 * @Date: 2022-06-09 14:28:08
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2023-08-02 10:14:47
-->
<template>
  <div class="table">
    <cus-table :show-index="true" :table-data="list" :table-header="columns" @dbClick="dbClick" @action="rowAction">
      <template #filters>
        <div class="filter-item flex f-x-s f-y-c">
          <el-input v-model="keyword" placeholder="请输入" clearable></el-input>
        </div>
        <el-button v-has="$power.goodsQuery" type="primary">查询</el-button>
        <el-button v-has="$power.goodsAdd" type="primary" icon="el-icon-plus">新增</el-button>
      </template>
      <template #avator="{ rowData }">
        <img width="40" alt="头像" :src="rowData.avator" />
      </template>
    </cus-table>
  </div>
</template>

<script>
import { list } from '@/data/tableJson'
export default {
  name: 'Table',
  data() {
    const columns = Object.freeze([
      {
        prop: 'goodsName',
        minWidth: 80,
        label: '商品名称'
      },
      {
        prop: 'avator',
        minWidth: 80,
        label: '商品图片',
        type: 'SLOT'
      },
      {
        prop: 'channel',
        minWidth: 80,
        label: '售卖渠道',
        formatter: function (row) {
          return row.channel == 1 ? '全网售卖' : '专供平台'
        }
      },
      {
        prop: 'price',
        minWidth: 80,
        label: '原价',
        formatter: function (row) {
          return `￥${row.price}`
        }
      },
      {
        prop: 'salePrice',
        minWidth: 80,
        label: '折扣价',
        formatter: function (row) {
          return `￥${row.salePrice}`
        }
      },
      {
        minWidth: 140,
        label: '操作',
        type: 'BUTTON',
        buttons: [
          { action: 'edit', label: '编辑', power: 'goodsEdit' },
          {
            action: 'delete',
            label: '删除',
            power: 'goodsDelete',
            btnColor: 'danger'
          }
        ]
      }
    ])
    return {
      columns,
      list,
      keyword: ''
    }
  },
  methods: {
    dbClick(params) {
      console.log(params)
    },
    rowAction(params) {
      //操作栏的按钮点击
      console.log(params)
      this.$message.warning(`操作类型：${params.action}`)
    }
  }
}
</script>

